<template>
    <div class="gaph"><mindMap /></div>
    <div class="gaph">
        <select-category @handle="setCategoryID" />
    </div>
    <div class="gaph"><el-input v-model="title" style="100%" /></div>
    <div class="gaph" style="border: 1px solid #ccc">
        <editor @change="onChange" />
    </div>
    <div class="gaph">
        <tag @handle="setTag" :content="valueText" />
    </div>
    <div>
        <el-button type="success" @click="add">添加</el-button>
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import selectCategory from '@/components/selectCategory.vue'
import mindMap from '@/components/mindMap.vue'
import tag from '@/components/tag.vue'
import { post } from '@/util/request.js'
import router from '@/router'
import editor from '@/components/editor.vue'
import { usePageStore } from '@/store/page'

const pageStore = usePageStore()

// 添加文章的内容
const title = ref('')
const categoryID = ref(null)
const tags = ref([])
const valueHtml = ref('')

const add = () => {
    let tagData = []
    tags.value.forEach((element) => {
        tagData.push({ title: element })
    })

    const data = {
        title: title.value,
        content: valueHtml.value,
        category_id: categoryID.value,
        tags: tagData
    }
    post('/article/add', data).then((resp) => {
        pageStore.setPn(1)
        router.push({ name: 'show-article' })
    })
}

const setCategoryID = (id) => {
    categoryID.value = id
}

const setTag = (v) => {
    tags.value = v
}

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
// 富文本编辑器内容改变时
const onChange = (v) => {
    valueHtml.value = v
}
</script>
